<template>
    <div class="content">
        <TableLayout form-title=""> 
             <el-form :model="formInline" class="formInline" label-width="90px" label-position="right" slot="form" v-collapse="false">          
                 <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="所属省">
                            <province v-model="formInline.fProvinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属市">
                            <city v-model="formInline.fCityId" :province="formInline.fProvinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属区县">
                            <region v-model="formInline.fAreaId" :city="formInline.fCityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>                
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称">
                            <school v-model="formInline.schoolName" :provinceId="formInline.fProvinceId" :cityId="formInline.fCityId" :areaId="formInline.fAreaId" style="width:100%" @change='schoolChange'></school>
                        </el-form-item>
                        <!--<el-form-item label="学校名称" prop="schoolName">
                            <el-autocomplete v-model="formInline.schoolName" :fetch-suggestions="remoteMethod" :trigger-on-focus="true" placeholder="请输入关键词" @select="querySchool" style="width:100%"></el-autocomplete>
                        </el-form-item>-->
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="支付平台">
                            <el-select v-model="formInline.sPipelineType" style="width:100%" >
                                <el-option v-for="item in payLand" :key="item.payId" :label="item.statusName" :value="item.payId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="支付方式">
                            <el-select v-model="formInline.sPaymentMethod" style="width:100%" >
                                <el-option v-for="item in payType" :key="item.payId" :label="item.statusName" :value="item.payId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <!--<el-col :span="8">
                        <el-form-item label="学校名称">
                            <el-input v-model="formInline.schoolName" placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col> -->
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item class="incomeTime" label="充值日期" label-width="80px">
                            <el-row>  
                                <el-col :span="11">
                                    <el-date-picker :clearable="false" :state="false" v-model="formInline.startDate" type="date" format="yyyy-MM-dd" placeholder="选择开始日期" :picker-options="formInline.pickerOptions1" @change="dateChange1" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center">至</el-col>
                                <el-col :span="11">
                                    <el-date-picker :clearable="false" :state="false" v-model="formInline.endDate" type="date" placeholder="选择结束日期" :picker-options="formInline.pickerOptions2"  @change="dateChange2" style="width:100%">
                                    </el-date-picker>
                                </el-col> 
                            </el-row>             
                            <span class="timeState" v-if = "timeState">请选择充值日期</span>     
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="top-line">
                    <el-col :span="4" :offset="20"> 
                        <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>

            <div class="withdrawals" slot="showPanel">
                <el-row :gutter="41">
                    <el-col :span="12">昨日收入金额（元）：<span style="margin-left:5px;">{{yesterday.yesterdayMoney}}</span></el-col>
                    <el-col :span="12">累计收入金额（元）：<span style="margin-left:5px;">{{yesterday.allMoney}}</span></el-col>
                </el-row>
            </div>

            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button  @click="exportBtn">导出</el-button>
                </div>
            </div>
            <el-table border ref="multipleTable" :data="dataApply"  style="width: 100%" @selection-change="handleSelectionChange" v-loading="loading">

                    <!--<el-table-column type="index" align="center"  width="55"></el-table-column>-->
                   
                    <el-table-column align="center" prop="sCreateTime" label="充值日期" min-width="150">
                        <template scope = "scope">
                            {{scope.row.sCreateTime === null? '--': scope.row.sCreateTime}}
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="sOrderNum" label="订单号" min-width="130">
                        <template scope = "scope">
                            {{scope.row.sOrderNum === null? '--': scope.row.sOrderNum}}
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="sSchoolName" label="学校名称" min-width="115">
                        <template scope = "scope">
                            {{scope.row.sSchoolName === null? '--': scope.row.sSchoolName}}
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="sCardNumber" label="卡号" min-width="115">
                        <template scope = "scope">
                            {{scope.row.sCardNumber === null? '--': scope.row.sCardNumber}}
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="sStudentName" label="持卡人姓名" min-width="105">
                        <template scope = "scope">
                            {{scope.row.sStudentName? scope.row.sStudentName: scope.row.sTeacherName? scope.row.sTeacherName: '--'}}
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="sCardholderExueCode" label="持卡人ID">
                        <template scope = "scope">
                            {{scope.row.sCardholderExueCode === null? '--': scope.row.sCardholderExueCode}}
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="sParentName" label="支付人" min-width="105">
                        <template scope = "scope">
                            {{scope.row.sParentName === null? '--': scope.row.sParentName}}
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="sPayerExueCode" label="支付人ID">
                        <template scope = "scope">
                            {{scope.row.sPayerExueCode === null? '--': scope.row.sPayerExueCode}}
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="sPhone" label="手机号" min-width="100">
                        <template scope = "scope">
                            {{scope.row.sPhone === null? '--': scope.row.sPhone}}
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="sMoney" label="金额（元）">
                        <template scope = "scope">
                            {{scope.row.sMoney === null? '--': scope.row.sMoney}}
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="sPaymentPlatform" label="支付平台">
                        <template scope = "scope">
                            {{scope.row.sPaymentPlatform === '0'? 'e学云平台': scope.row.sPaymentPlatform === '1'? '其他平台': '--'}}
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="sPaymentMethod" label="支付方式">
                        <template scope = "scope">
                            {{scope.row.sPaymentMethod === '0'? 'e学云余额': scope.row.sPaymentMethod === '1'? '支付宝':scope.row.sPaymentMethod === '2'? '微信':scope.row.sPaymentMethod === '3'? '暂无':'--'}}
                        </template>
                    </el-table-column>

            </el-table>
            <div class="pagination-container" style="text-align:right">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="listQuery.total"
                        :current-page.sync="listQuery.page"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
            </div>
        </TableLayout>


                    <!--<el-col :span="12">
                        <el-form-item label="消费时间" prop="startDate" :rules="rules.startDate">
                            <el-date-picker :editable="false" v-model="formInline.startDate" type="date" format="yyyy-MM-dd" placeholder="选择开始日期" :picker-options="formInline.pickerOptions1" @change="dateChange1" style="width:100%">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item prop="endDate" :rules="rules.endDate">
                            <el-date-picker :editable="false" v-model="formInline.endDate" type="date" placeholder="选择结束日期" :picker-options="formInline.pickerOptions2"  @change="dateChange2" style="width:100%">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    startDate: [
                    { required: true, type:'date', message: '开始日期不能为空', trigger: 'change' }
                ],
                endDate: [
                    {required: true, type:'date', message: '结束日期不能为空', trigger: 'change' }
                ]
                    -->

    </div>
</template>

<script>
import { querySchoolByName, countIncomeSettlementDetail, pageIncomeSettlementDetail } from 'api/settleManagement';
// import {test} from 'api/login';
import TableLayout from 'components/TableLayouts';
import { mapState, mapActions } from 'vuex';
import { mapGetters } from 'vuex';
import moment from 'moment';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import school from 'components/SchoolClasss/school';
export default{
    name: 'incomeModule',
    components: {TableLayout, province, city, region, school},
    data() {
        return {
            pId: '',
            yesterday: {
                allMoney: '',
                yesterdayMoney: ''
            },
            formInline: {// form表单数据
                schoolName: '',
                schoolId: '',
                fProvinceId: '',
                fAreaId: '',
                fCityId: '',
                sPipelineType: '',
                sPaymentMethod: '',
                startDate: '', // 注册开始时间
                endDate: '', // 注册结束时间
                pickerOptions1: {},
                pickerOptions2: {}
            },
            payLand: [
                {
                    payId: '',
                    statusName: '请选择'
                },
                {
                    payId: '0',
                    statusName: 'e学云平台'
                }, 
                {
                    payId: '1',
                    statusName: '其他平台'
                }
            ],
            payType: [
                {
                    payId: '',
                    statusName: '请选择'
                },
                {
                    payId: '0',
                    statusName: 'e学云余额'
                }, 
                {
                    payId: '1',
                    statusName: '支付宝'
                },
                {
                    payId: '2',
                    statusName: '微信'
                }
                // {
                //     payId: '3',
                //     statusName: '暂无'
                // }
            ],
            dataApply: [],
            timeState: false,
            loading: false,
            listQuery: {// 分页
                page: 1,
                total: 0
            }
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'uid',
            'token'
        ])
    },
    created() {
        this.initDate();
        this.searchFetchData();
        this.searchData();
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        // 设置初始时间
        initDate() {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            this.formInline.startDate = start;
            this.formInline.endDate = end;
        },
        
        // 
        searchData() { 
            // let startDate = this.formInline.startDate==''?'':moment(this.formInline.startDate).format('YYYY-MM-DD');
            // let endDate = this.formInline.endDate==''?'':moment(this.formInline.endDate).format('YYYY-MM-DD');
            countIncomeSettlementDetail(
                this.formInline.fProvinceId, 
                this.formInline.fCityId, 
                this.formInline.fAreaId,
                // this.formInline.schoolName,
                this.formInline.schoolId,
                // startDate,
                // endDate,
                // this.formInline.sPipelineType,
                // this.formInline.sPaymentMethod
                ).then(response => {
                    this.yesterday = response.data.content;
                    this.yesterday.allMoney = parseFloat(this.yesterday.allMoney).toFixed(2);
                    this.yesterday.yesterdayMoney = parseFloat(this.yesterday.yesterdayMoney).toFixed(2);
            
                });
        },
        
        schoolChange(val) {
            this.formInline.schoolId = val;
        },

        // 查询
        onSubmit() {// 表单查询
            this.listQuery.page = 1;
            if (this.formInline.startDate ==='' || this.formInline.endDate ==='') {
                this.timeState = true;
                return;
            }
            this.loading = true;
            this.searchData();
            this.searchFetchData();
        },

        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        },

         // 开始日期選擇
        dateChange1(date) {
            this.formInline.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime() - 864e5;
                }
            }
            this.timeState = false;
        },
        
        // 结束日期选择
        dateChange2(date) {
            this.formInline.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime();
                }
            }
            this.timeState = false;
        },
        
        // 模糊查询学校名称
        remoteMethod(query, cb) {
            query = query.trim();
            if (query) {
                querySchoolByName(query).then(response => {
                    this.schoolList = response.data.content;
                }).then(() => {
                    let results = this.schoolList.filter(this.createStateFilter(query));
                    clearTimeout(this.timeout);
                    this.timeout = setTimeout(() => {
                        cb(results);
                    }, 200 * Math.random());
                });
            } else {
                cb([]);
            }  
        },
        createStateFilter(query) {
            return (state) => {
                state.value = state.schoolName; 
                return (state.value.toLowerCase().includes(query.toLowerCase()));
            };
        },

        // 选择学校
        querySchool(val) {

            // this.schoolType = val.schoolType;

            if (this.formInline.schoolName) {
                this.formInline.schoolId = val.schoolId; 
            }
        },
        searchFetchData() {
            let startDate = this.formInline.startDate==''? moment().subtract('7', 'days').format('YYYY-MM-DD'):moment(this.formInline.startDate).format('YYYY-MM-DD');
            let endDate = this.formInline.endDate==''? moment().format('YYYY-MM-DD'):moment(this.formInline.endDate).format('YYYY-MM-DD');
            this.loading = true;
            pageIncomeSettlementDetail(
                this.listQuery.page, 
                this.config.pageSize, 
                this.formInline.fProvinceId, 
                this.formInline.fCityId, 
                this.formInline.fAreaId, 
                // this.formInline.schoolName,
                this.formInline.schoolId,
                startDate,
                endDate,
                this.formInline.sPipelineType,
                this.formInline.sPaymentMethod
                ).then((response) => {
                    this.loading = false;
                    if (response.data.status==200) {
                        this.dataApply = response.data.content.list;
                        this.listQuery.total = response.data.content.pagination.total;
                        this.loading = false;   
                    } else {
                        this.$message({
                            type: 'warning',
                            message: response.data.errorMsg
                        })
                    }

                    console.log('res', response.data.content.list);

                });
        },

        // 导出
        exportBtn() {
            let startDate = this.formInline.startDate==''? moment().subtract('7', 'days').format('YYYY-MM-DD'):moment(this.formInline.startDate).format('YYYY-MM-DD');
            let endDate = this.formInline.endDate==''? moment().format('YYYY-MM-DD'):moment(this.formInline.endDate).format('YYYY-MM-DD');
            window.location.href = `${LOCAL_API.fyq}/settlement/exportIncomeSettlementDetail?provinceId=${this.formInline.fProvinceId}&cityId=${this.formInline.fCityId}&areaId=${this.formInline.fAreaId}&fSchoolId=${this.formInline.schoolId}&beginDate=${startDate}&endDate=${endDate}&sPipelineType=${this.formInline.sPipelineType}&sPaymentMethod=${this.formInline.sPaymentMethod}&token=${this.token}`; 
        },

        // 通过
        adoptBtn() {
            updateSettlement(settlementIds, this.formInline.typeStatus, this.formInline.sRemark).then(response => {
                this.searchFetchData();
                this.$message({
                    type: 'success',
                    message: response.data.errorMsg
                })
            });  
        },
        
        // 完成
        successBtn() {
            this.$confirm('确认完成打款？', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                updateSettlement(settlementIds, this.formInline.typeStatus, this.formInline.sRemark).then(response => {
                    this.searchFetchData();
                    this.$message({
                        type: 'success',
                        message: response.data.errorMsg
                    })
                });  
            }).catch(() => {
                this.$message.info('已取消');
            });
        },

        // 失败

        failBtn(row) {
            console.log(this.dialog.dialogFormVisible2);
            this.dialog.dialogFormVisible2=true;
        },
       
        // 拒审
        refuse(row) {
            console.log(this.dialog.dialogFormVisible1);
            // this.dialog.pid = row.schoolId;
            this.dialog.dialogFormVisible1=true;
        },

        // 查看详情

        checkDetails(row) {
            this.$router.push({
                path: `checkDetails/${row.pId}`
            });
            // this.$router.push('checkDetails', params: pId);
        }
      
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    .incomeTime{
        position: relative;
        padding-left: 10px;
        &::before{
            content: "*";
            position: absolute;
            left: 14px;
            top: 10px;
            color: #ff4949;
        }
    }
    .timeState{
        font-size: 12px;
        color: #ff4949;
        line-height: 1;
        padding-top: 4px;
        position: absolute;
        top: 100%;
        left: 0;
    }
    .withdrawals{
        width:100%;
        background:#fff;
        padding:30px 100px;
        margin-bottom:20px;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        .el-col{
            text-align:left;
            span{
                margin-left:10px;
                font-size:18px;
                display:inline-block;
            }
        }
    }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
}
</style>  
